<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>获取表单的值</title>
  <script src="./scripts/vue.js"></script>
</head>

<body>
  <pre>
    表单域操作符说白了就是对输入的值进行格式化处理
  </pre>

  <div id="app">
    <!-- input 输入的值默认是 string 类型 -->
    <!-- 如果想转成 number 类型，给 v-model 后面加上一个 .number 操作符 -->
    <input type="number" v-model.number="numVal">

    <!-- trim 修饰符用来去除输入框左右两侧的空格 -->
    <input type="text" v-model.trim="strVal">

    <!-- .lazy 等待用户输入完成以后，鼠标离开输入框以后触发事件，将 input 事件转换成  change 事件-->
    <!-- v-on:input 是用户输入内容，就能够打印 -->
    <!-- v-on:change 当用户输入内容以后，鼠标离开输入框以后触发事件 -->
    <input type="text" v-on:change="handle">
    <input type="text" v-model.lazy="val">

    <p>{{ val }}</p>

    <button @click="btnHandle">按钮</button>
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        numVal: '',
        strVal: '',
        val: ''
      },
      methods: {
        handle(e) {
          console.log(e.target.value)
        },
        btnHandle() {
          // console.log(typeof this.numVal)
          // console.log(this.strVal)
          console.log(this.val)
        }
      }
    });
  </script>
</body>

</html>